<template>
    <div class="comment-container">
        <h2>发表评论</h2>
        <hr>
        <textarea placeholder="请输入评论内容(最多不超过120字)" maxlength="120" class="comment" v-model="msg"></textarea>
        <mt-button type="primary" size="large" @click="postComment">发表评论</mt-button>

        <div class="comment-list">
            <div class="list-item" v-for="(item,index) in comments" :key="item.add_time">
                <div class="list-item-title">
                    第{{index+1}}楼 用户: {{item.user_name}} 发表时间: {{item.add_time | dateFormat}}
                </div>

                <div class="list-item-body">
                    {{ item.content==="" || item.content==="undefined"  ? '该用户很懒,什么都没说!' : item.content }}
                </div>

            </div>
        </div>
        <mt-button type="primary" size="large" plain @click="getMore">加载更多</mt-button>
    </div>
</template>

<script>
    export default {
        name: "Comment",
        data() {
            return {
                pageIndex: 1,
                comments: [],
                msg: ''
            }
        },
        created() {
            this.getComment()
        },
        methods: {
            getComment() {
                this.axios.get(`getcomments/${this.id}?pageindex=${this.pageIndex}`)
                    .then(response => {
                        if (response.data.status === 0) {
                            this.comments = this.comments.concat(response.data.message);
                        } else {
                            this.$toast('获取评论信息失败!')
                        }
                    })
            },
            getMore() {
                this.pageIndex++;
                this.getComment();
            },
            postComment() {
                if (this.msg.trim().length === 0) {
                    return this.$toast('评论内容不能为空!');
                }
                this.axios.post(
                    `postcomment/${this.$route.params.id}`,
                    {content: this.msg.trim()}
                )
                    .then(response => {
                        if (response.data.status === 0) {
                            let cmt = {
                                user_name: '匿名用户',
                                add_time: Date.now(),
                                content: this.msg.trim()
                            };
                            this.comments.unshift(cmt);
                            this.msg='';
                        } else {
                            this.$toast('添加评论信息失败!')
                        }
                    })
            }
        },
        props: ["id"]
    }
</script>

<style scoped>
    .comment-container {
        margin: 5px 4px;
    }
    .comment {
        height: 200px;
        font-size: 25px;
    }
    .mint-button--large {
        height: 80px;
        font-size: 30px;
    }
    .list-item {
        font-size: 30px;
        margin: 10px 0;
    }
    .list-item-title {
        line-height: 60px;
        background-color: darkgray;
    }
    .list-item-body {
        line-height: 60px;
        text-indent: 2em;
    }
</style>